<script  lang="ts" setup name="Person">
  import {ref,watch} from "vue";
  let person = ref({
    name:'张三',
    age:18
  })
  function changName (){
    person.value.name += '~'
  }
  function changeAge (){
    person.value.age += 1
  }
  function changePerson (){
    person.value = {name: '李四',age: 19}
  }
    /*
      监视，情况二：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监听（deep:true）
      watch的第一个参数是：被监视的数据
      watch的第二个参数是：监视的回调
      watch的第三个参数是：配置对象（deep、immediate等等...）
    */
  watch(person,(value, oldValue)=>{
    console.log('person变化了',value, oldValue)
  },{
    deep:true
  })
</script>

<template>
  <div class="prisonBox">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <button @click="changName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0px 10px;
      }
    }
</style>